<!-- Dialog.vue -->
<!-- CustomDialog.vue -->
<template>
    <el-dialog class="el_dialog" :visible.sync="localDialogVisible" top="5%" @close="closeDialog">
        <span class="custom-dialog-title" slot="title">订单详情</span>
        <div id="container" class="dialog-content">
            <div style="width: 1002px;">
                <div class="div_order">
                    <p>订单信息</p>
                    <el-divider></el-divider>
                    <div class="div_span">
                        <span>订单编号:</span>
                        <span>{{ orders.id }}</span>
                        <span style="margin-left: 240px;">下单时间:</span>
                        <span>{{ orders.createTime }}</span>
                    </div>
                </div>
                <div class="div_info">
                    <p>商品信息</p>
                    <el-divider></el-divider>
                    <ProductInfoTable :data="orders.listProductOrderInfos" :price="orders.orderAmount" />
                </div>
                <div class="div_notes">
                    <p>备注：</p>
                    <el-divider></el-divider>
                    <div class="div_span">
                        {{ orders.remark == null ? "暂无备注" : orders.remark}}
                    </div>
                </div>
                <div class="div_commet">
                    <div style="display: flex;">
                        <span class="p" style="margin-left: 0px;">评价信息：</span>
                        <custom-rate class="rate_com" :value="3" :maxRate="5" />
                    </div>
                    <el-divider></el-divider>
                    <div class="div_rate">
                        <!-- <p class="commet_p">{{ orders.comment.commetContent }}</p> -->
                        <div class="rate_img">
                            <!-- <img v-for="(imagePath, index) in orders.comment.imgSrcs " :key="index" :src="imagePath"
                                alt="Image" /> -->
                                暂无数据
                        </div>
                    </div>
                </div>
                <MessageDeatil :message.sync="orders" />
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="info" @click="closeDialog" style="font-size: 14px; height: 38px; margin-right: 8px">取
                消</el-button>
            <el-button style="width: 127px; margin-right: 5px">修改收货信息</el-button>
            <el-button @click="closeDialog" style="background-color:rgba(90, 52, 179, 1);color: white ">发货</el-button>
        </span>
    </el-dialog>
</template>

<script>
import CustomRate from '../components/OrderRate.vue';
// import CustomTimeline from '../components/OrderTimeLine.vue';
import ProductInfoTable from '../components/ProductInfoTable.vue'
import MessageDeatil from './MessageDeatil.vue';

export default {
    name: 'CustomDialog',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        orderData: {
            type: Object,
            default: () => ({}), // 提供一个空对象作为默认值  
        }
    },
    watch: {
        // 监听 orderData 的变化  
        orderData(newVal) {
            // 当 orderData 发生变化时，调用某个方法来处理它  
            this.orders = newVal;
            console.log(newVal);

        },
        dialogVisible(newVal) {
            this.localDialogVisible = newVal;
            console.log(newVal);
        }
    },
    mounted() {
        console.log("mounted");
        console.log(this.orderData);
    },
    methods: {
        // handleOrderData(data) {
        //     // 在这里处理数据，例如格式化、转换等  
        //     this.orders.orderId = data.orderId;
        //     this.productData = [];
        //     for (let item of data.sortTree) {
        //         for (let children of item.children) {
        //             let label = children.label
        //             label = label.replace(/^\u00B7/, '');
        //             let product = {
        //                 "productName": label + "",
        //                 "productValues": (children.note !== undefined) ? this.cycleNote(children.note) : "/",
        //                 "productCount": 1,
        //             }
        //             this.productData.push(product)
        //         }
        //     }
        //     this.orders.product = this.productData;
        //     this.orders.comment.rateStar = data.rateList.father
        //     console.log(data.sortTree[0].children[0].note);
        // },
        // cycleNote(s) {
        //     // 循环s，以逗号为分隔符
        //     // 分割字符串 s 为数组  
        //     let parts = s.split(',');

        //     let sortData = []; // 用来存储结果的数组
        //     // 确保 parts 的长度不超过 childrenData 的长度，从1开始映射（跳过索引0）  
        //     for (let i = 1; i <= parts.length; i++) {
        //         // 拼接标签和值  
        //         let labelValue = `${this.childrenData[i]}：${parts[i - 1].trim()}`; // 减去1是因为从1开始映射  
        //         // 将拼接的字符串添加到 sortData 数组中  
        //         sortData.push(labelValue);
        //     }
        //     return sortData; // 如果需要返回值
        // },
        // addItem() {
        //     const newItem = '新数据_' + this.items.length // 创建一个新数据项
        //     this.items.push(newItem) // 将新数据添加到数组中
        // },
        closeDialog() {
            // 当点击关闭按钮时，更新本地数据并发出事件通知父组件  
            this.localDialogVisible = false;
            this.$emit('update:dialogVisible', false);
        }
    },
    data() {
        return {
            localDialogVisible: this.dialogVisible,
            productData: [],
            childrenData: ["/", "机身颜色", "存储容量"],
            // 在这里定义 rateValue，它将与 el-rate 组件的 v-model 绑定
            orders: {
                product: [
                    {
                        productName: '',
                        productValues: ['', ''],
                        productCount: 1,
                        productPrice: 10.999,
                        productSingleTotal: 10.99
                    },
                    {
                        productName: '',
                        productValues: [''],
                        productCount: '',
                        productPrice: 100,
                        productSingleTotal: 100
                    }
                ],
                productTotal: '￥11,999',
                notes: '别搞错了颜色',
                comment: {
                    rateStar: 0,
                    imgSrcs: [
                        // 使用相同的路径风格来require图片  
                        require('@/assets/order/美食1.png'),
                        require('@/assets/order/美食2.png'),
                        require('@/assets/order/美食3.png'),
                    ],
                    commetContent: '商品非常非常的好，非常满意'
                },
                consigInfo: {
                    consigName: '张三',
                    consigPhone: '136****9677',
                    consigAddress: '广东省东莞市越秀区东风中路石湾商业中心18楼1805'
                },
                // 收货不确定快递方式是界面选择直接生成一个收货人类还是从个人信息中获取
                consigMethod: '快递',
                payInfo: {
                    payMoney: '￥21.24',
                    payMethod: '微信支付',
                    payTime: '2024/5/17 16:15:12'
                },
                logisInfo: {
                    logisCompany: '顺丰快递',
                    logisId: 'SF1211111111111111111',
                    logisDetail: [
                        {
                            content: '订单已签收',
                            timestamp: '2022-04-15 12:00:00'
                        },
                        {
                            content: '到达目的地网点广东深圳公司，快件将很快进行派送',
                            timestamp: '2022-04-14 12:00:00'
                        },
                        {
                            content: '订单已提交，等待付款',
                            timestamp: '2022-04-13 12:00:00'
                        },
                    ]
                }
            }
        }
    },
    components: {
        // 注册 custom-rate 组件  
        CustomRate,
        ProductInfoTable,
        MessageDeatil,
    },
}
</script>

<style scoped>
/* 其他样式... */

#container {
    width: 100%;
    height: 500px;
    /* font-weight: 500; */
}

.el-divider--horizontal {
    height: 0px;
    border: 1px solid rgba(235, 238, 242, 1);
    margin: 12.5px 0px 24.5px 0px;
}

.custom-dialog-title {
    color: rgba(52, 69, 99, 1);
    font-weight: 700;
    font-size: 18px;
    /* 其他你想要的样式 */
}

.dialog-content {
    overflow-y: auto;
    /* 当内容超出时显示滚动条 */
}

.dialog-content>>>.el-dialog__wrapper {
    height: 500px;
    /* 设置固定高度 */
}

/* .dialog-footer{
    background-color: aquamarine;
} */

.div_consignee {
    width: 90%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 25px;
}

text {
    margin-top: 2px;
    color: aquamarine;
}

.div_info {
    height: auto
}

.info_span {
    margin-top: 10px;
    margin-left: 20px;
}

.info_span span {
    padding-right: 10px;
}

.rate_com {
    margin-top: 10px;
}

.el-dialog_header>>>.el-dialog__title {
    font-weight: 700;
    color: white;
}

.div_order {
    height: 108px;
}

.div_allInfo {
    width: 100%;
    height: auto;
    background-color: rgb(235, 238, 241);
}

.div_allInfo p {
    padding-top: 5px;
    padding-left: 20px;
}


.div_logistics {
    height: auto;
    /* padding-bottom: 20px; */
}

.div_rate {
    /* height: 25%; */
    /* background-color: blueviolet; */
    width: 300px;
}

.div_rate span {
    width: 0px;
}

.div_commet {
    width: auto;
    height: 200px;
}

.div_commet span {
    margin: 10px 10px 0px 15px;
}

.rate {
    margin-top: 2px;
}

.commet_p {
    font-size: 14px;
    margin-left: 18px;
    font-weight: 500;
}

.div_span {
    /* 垂直居中 */
    margin-left: 20px;
    /* 水平居中 */
    height: 50px;
    /* background-color: aqua; */
    font-size: 14px;
    /* font-weight: 500; */
    color: rgba(52, 69, 99, 1);
    font-size: 14px;
    margin-left: 18px;
    font-weight: 500;
}

.div_span_order {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-left: 20px;
    /* 水平居中 */
    height: 50px;
    /* background-color: aqua; */
    font-size: 14px;
}

/* .div_span span {
    margin: 20px 10px 0px 15px;
} */

.rate_img {
    width: 420px;
    height: 150px;
    margin: 25px 0 0 18px;
    /* background-color: aqua; */
}

.rate_img img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 5px;
    /* 设置圆角 */
}

.div_commet_div {
    float: left;
    width: 500px;
    height: 250px;
}

p {
    /* margin-left: px; */
    color: rgba(52, 69, 99, 1);
    /* font-weight: 550; */
    height: 23px;
    line-height: 22.4px;
    font-weight: 700;
    font-size: 15px;
}

.p {
    color: rgba(52, 69, 99, 1);
    /* font-weight: 550; */
    height: 23px;
    line-height: 22.4px;
    font-size: 15px;
    font-weight: 700;
    margin-left: 0px;
}

.product_total {
    text-align: right;
    margin: 10px 11%;
    font-size: 12px;
}

.custom-rate .el-rate__item {
    margin-right: 10px;
    /* 调整这里的值来改变星星之间的间距 */
}

span {
    /* color: rgba(52, 69, 99, 1);
    line-height: 22.4px;
    width: 75px; */
    height: 23px;
    opacity: 1;
    /** 文本1 */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 22.4px;
    color: rgba(52, 69, 99, 1);
    /* color: black; */
    text-align: left;
    vertical-align: top;
    margin-right: 10px
        /* 设置你想要的宽度 */
}

.express-detail-container {
    display: flex;
}

.timeline-container {
    /* 这里可以添加额外的样式来控制timeline的外观，比如宽度、边距等 */
    margin-top: 4px;
}

.el-timeline {
    padding: 0;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    height: 38px;
    width: 112px;
    margin: 0px;
    border-radius: 5px;
    margin-right: 2px;
}
</style>